<template>
  <div class="honor">
    <div class="hand" style="margin-bottom: -2vh;z-index: 1">
      <!--返回-->
      <div class="reback" @click="back"
           style="
             padding-top: 15px;
             padding-left: 20px;
             ">
        <p style="opacity: 50%;font-size: 8vw"><</p>
      </div>
      <!--文字-->
      <div class="font">
        <p style="font-size: 3vw;opacity: 50%;margin-left: 15vw;margin-top: 3vh">我的徽章</p>
      </div>
      <!--徽章数-->
      <div class="number" style="margin-top: 0;margin-left: 8vw;margin-bottom: -3vh">
        <p class="num"
           style="
        font-size: 14vw;
        color: #415263"
        >
          {{hasNum}}&nbsp;
          <span style="
        font-size: 7vw;
        opacity: 50%;
      ">/{{totolNum}}</span>
        </p>
      </div>
      <!--图标-->
      <div class="logo" style="margin-left: 65vw;margin-bottom: 2vh;display: inline-block">
        <img src="../../../assets/honor.png"
             style="
        width: 25vw;
        height: 25vw;
        margin-top: -10vh;
        "
        >
      </div>
    </div>
    <div class="body" style="padding-bottom: 2vh;"  ref="box">
      <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          finished-text="没有更多了"
          @load="onLoad"
          style="height: 70vh;overflow: scroll;"
      >
        <!--      <div class="van-clearfix" style="padding-top: 10px;    margin-top: 5%;-->
        <!--    margin-left: 15%;" @click="getList">-->
        <van-row v-for="(item,index) in honorList" style="margin-top: 12vh" :key="index">
          <van-col span="8" v-for="(cell,i) in item" :key="i" >
              <img :src="cell.iconUrl" style="margin-left: 25%;width: 50%" @click="showPopup(index,i)">
              <p style="text-align: center;vertical-align: center;font-size: 12px;" >{{cell.honorName}}</p>
            <van-popup
                v-model="cell.show"
                round
                closeable
                @click-close-icon="onClose(index,i)"
                style="
              height: 80vw;
              width: 80vw;
              /*display: flex;*/
              /*justify-content: center;*/
              /*align-items: center;*/
              position: relative;
              "
            >
              <div class="content" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
                <img :src="cell.iconUrl">
                <div class="text" style="vertical-align: center;font-size: 16px;text-align: center;" >
                  <p style="margin-top: 5px">{{cell.honorName}}</p>
                  <p style="font-size: 12px;
                  margin-top: 5px;
                  opacity: 50%;"
                  >{{(cell.has=='1')?'已获得':'未获得'}}</p>
                  <div v-if="cell.has=='1'" style="margin-top: 10px">
                    <p>{{cell.gainTime}}获得</p>
                  </div>
                  <div v-else style="margin-top: 10px">
                    <div v-if="cell.available=='1'">
                      <p v-if="cell.endTime!=null">截止{{cell.endTime}}</p>
                    </div>
                    <div v-if="cell.available=='0'">
                      <p>已不可获取</p>
                    </div>
                  </div>
                  <p style="margin-top: 5px">{{cell.acquireWay}}</p>
                </div>
              </div>
            </van-popup>
          </van-col>
        </van-row>
      </van-list>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {mapState} from "vuex";

export default {
  data(){
    return{
      list: [],
      loading: false,
      finished: false,
      index: 0,
      hasNum:0,
      totolNum:0,
      honorList:[
      ],
      resultList:[
      ]
    }
  },
  computed: {
    ...mapState(['userinfo'])
  },
  created() {
    let url = 'http://localhost:10002/honor/list';
    console.log(this.userinfo.id)
    this.axios.get(url+"?userId="+this.userinfo.id).then(response =>{
      if (response.data.state == 200){
        console.log("response.data.data:",response.data.data)
        let old = 0;
        this.resultList.push([])
        for (let i=0;i<response.data.data.length;i++){
          let j=Math.trunc(i/3);
          if (old!=j){
            this.resultList.push([]);
            old=j;
          }
          console.log(response.data.data[i].honorName)
          response.data.data[i].honorName = (response.data.data[i].honorName.length > 5) ?
            response.data.data[i].honorName.substring(0,5)+"...":response.data.data[i].honorName;
          let item=response.data.data[i];
          item["show"] = false;
        
          this.resultList[j].push(item);
          if(response.data.data[i].has=='1'){
            this.hasNum++;
          }
        }
        this.totolNum=response.data.data.length;
        this.index=(old>4)?5:old;
        for (let i=0;i<this.index;i++){
          this.honorList.push(this.resultList[i]);
        }
        console.log("this.honorList:",this.honorList)
      }
    })
  },
  methods: {
    back(){
      history.go(-1);
    },
    onLoad(){
      this.loading=true;
      if (this.resultList.length-1>=this.index){
        let times = this.resultList.length - this.index;
        console.log("差值",times)
        times = (times >= 5) ? 5 : times;
        for (let i = this.index; i < this.index + times; i++) {
          this.honorList.push(this.resultList[i]);
        }
        this.index += times;
        this.finished=true;
      }else{
        this.finished=false;
      }
      this.loading=false;
      console.log("架子啊")
    },
    showPopup(index,i){
      this.honorList[index][i].show=true;
      console.log("index",index)
      console.log("i",i)
      console.log("item",this.honorList[index][i])
      console.log("list",this.honorList)
    },
    onClose(index,i){
      this.honorList[index][i].show=false;
      console.log("index",index)
      console.log("i",i)
      console.log("item",this.honorList[index][i])
      console.log("list",this.honorList)
    }
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.honor{
  width: 100vw;
  height: 100vh;
  background-color: #EDF0E9;
  margin: 0;
  padding: 0;
}
.hand{
  width: 100vw;
  height: 20vh;
  margin-left: 1%;
}
.body{
  padding: 0;
  width: 90vw;
  height: 75vh;
  background-color: #FFFFFF;
  margin-left:5vw;
  margin-top: 5vh;
  margin-bottom: 0;
  -moz-border-radius-topleft: 30px;
  -moz-border-radius-topright: 30px;
  position: fixed;
  z-index: 0;
  overflow: auto;
}
</style>